<template>
  <div class="EmergencyDailyReport">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item>预警日报</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="EmergencyDailyReport-center">
      <div class="EmergencyDailyReport-left">
        <div class="EmergencyDailyReport-left-top">
          <div class="picker">
            <el-date-picker v-model="monthValue" type="month" :clearable="false"
              :placeholder="`${new Date().getFullYear()}年${new Date().getMonth() + 1}月`" format="yyyy年MM月" ref="datePick">
            </el-date-picker>
          </div>

          <el-calendar v-model="date" ref="calendar" :first-day-of-week=7 style="height:100%">
            <template slot="dateCell" slot-scope="{date, data}">
              {{ data.type == "current-month" ? data.day.split('-')[2].slice(0, 1) == "0" ?
                data.day.split('-')[2].slice(1) : data.day.split('-')[2] : ""
              }}
              <img v-if="dates.includes(data.day)" class="img" src="../../../assets/img/flash.png" />
            </template>
          </el-calendar>
        </div>
        <div class="EmergencyDailyReport-left-bottom">
          <div class="EmergencyDailyReport-left-bottom-tb-rie">
            当日日报统计
          </div>
          <div class="EmergencyDailyReport-left-bottom-tb-rr">
            <el-table stripe border
              :header-cell-style="{ background: '#B1C8F9', color: '#000000', border: '1px solid rgba(128,128,128,0.5)', fontSize: '16px', fontWeight: 'bold', height: '22px' }"
              ref="table" height="95%" :data="tableData1" tooltip-effect="dark" style="width: 100%" size="small"
              row-key="id" default-expand-all :tree-props="{ children: 'children' }"
              :cell-style="{ fontSize: '13px', height: '26px', borderColor: 'rgba(128,128,128,0.5)' }">
              <el-table-column type="index" label="序号" align="center" width="120px">
              </el-table-column>
              <el-table-column prop="unitName" label="所属单位" show-overflow-tooltip align="center" width="220px">
              </el-table-column>
              <el-table-column prop="reportable" label="应报数" show-overflow-tooltip align="center">
              </el-table-column>
              <el-table-column prop="actualReport" label="实报数" show-overflow-tooltip align="center">
              </el-table-column>
              <el-table-column prop="notReported" label="未报数" show-overflow-tooltip align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="EmergencyDailyReport-right">
        <div class="EmergencyDailyReport-right-top">
          <div class="EmergencyDailyReport-tb-bt-titel">
            <div class="EmergencyDailyReport-tb-bt-top">
              <SelectOptions class="SelectOptions" :value="form.warningNotiId" :options="warningNotifiOptions"
                @change="selectChange" />
              <!-- <el-select v-model="form.warningNotiId" placeholder="请选择" style="width:100%" @change="selectChange">
                <el-option v-for="item in warningNotifiOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select> -->
            </div>
            <div class="EmergencyDailyReport-tb-bt-bottom" @click="goList" style="color:#fff">更多<i
                class="el-icon-d-arrow-right" color="#fff"></i></div>
          </div>
          <div class="EmergencyDailyReport-content">
            <el-row :gutter="20" style="margin-left: 0; margin-right: 0; padding-left: 10px; padding-right: 10px;">
              <el-col :span="12" v-for="(item, i) in dayList" :key="i">
                <router-link tag="div" :to="`/WarningDailyDetail?id=${item.id}`" class="EmergencyDailyReport-content-top">
                  <div class="EmergencyDailyReport-content-tiel">
                    {{ item.dailyName }}
                  </div>
                  <div class="EmergencyDailyReport-content-tial">
                    <div>上报人：{{ item.creator }}</div>
                    <div>上报时间：{{ item.createTime }}</div>
                  </div>
                </router-link>
                <!-- <el-empty image="" description="暂无日报" v-if="!dayList.length"></el-empty> -->
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SelectOptions from "@/components/selectOptions.vue";
import {
  getAllWarningNotifApi
} from "@/api/EarlyWarningManagement/dgdw.js";
import {
  getDayByYjtzdApi,
  getDayCalendarApi,
  dailyStatisticsApi
} from "@/api/EarlyWarningManagement/yjrb.js";
// import commonUtil from "@/utils/commonUtil.js"
export default {
  name: "EmergencyDailyReport",
  components: { SelectOptions },
  data() {
    return {
      // monthValue: "",
      date: new Date(),
      values: "地市级单位",
      warningNotifiOptions: [],
      form: {
        warningNotiId: ""
      },
      dayList: [],
      tableData1: [],
      /* tableData1: [{
        id: 1,
        dw: "国网湖北省电力有限公司",
        yb: "2",
        sb: "2",
        wb: "0",
        children: [{
          id: 2,
          dw: "国网武汉供电公司",
          yb: "0",
          sb: "0",
          wb: "0"
        }, {
          id: 3,
          dw: "国网荆州供电公司",
          yb: "0",
          sb: "0",
          wb: "0"
        }, {
          id: 4,
          dw: "国网黄石供电公司",
          yb: "0",
          sb: "0",
          wb: "0"
        }, {
          id: 5,
          dw: "国网宜昌供电公司",
          yb: "0",
          sb: "0",
          wb: "0"
        }, {
          id: 6,
          dw: "国网襄阳供电公司",
          yb: "0",
          sb: "0",
          wb: "0"
        }, {
          id: 7,
          dw: "国网孝感供电公司",
          yb: "0",
          sb: "0",
          wb: "0"
        }, {
          id: 8,
          dw: "国网随州供电公司",
          yb: "0",
          sb: "0",
          wb: "0"
        }]
      }], */
      dates: []
    };
  },
  watch: {
    // date(newVal) {
    //   // this.getDayCalendar(newVal)
    // }
    date: {
      handler(val) {
        if (val) {
          this.date = val;
          getDayCalendarApi({ month: this.formatDate(val) }).then(res => {
            this.dates = res;
          });
        }
      },
      immediate: true
    }

    // monthValue(newVal) {
    //   this.date = newVal
    //   // this.date = this.$refs.datePick.value
    //   console.log("--------------------")
    //   console.log("选择器", this.monthValue)
    //   console.log("日历", this.$refs.calendar.value)
    // }
  },
  // computed: {
  //   date() {
  //     return this.$refs.datePick.value
  //   }
  // },
  computed: {
    monthValue: {
      get: function () {
        return this.date;
      },
      set: function (newValue) {
        this.date = newValue;
        getDayCalendarApi({ month: this.formatDate(newValue) }).then(res => {
          this.dates = res;
        });
      }
    }
  },

  created() {
    this.getAllWarningNotif();
    this.getDayCalendar(new Date());
    this.dailyStatistics();
    // this.pickTime()
  },
  mounted() {
    const prevBtn = document.querySelector(
      ".el-calendar__button-group .el-button-group>button:nth-child(1)"
    );
    prevBtn.addEventListener("click", e => {
      console.log(this.$refs.calendar.date);
      this.getDayCalendar(this.$refs.calendar.date);
    });

    // 点击今日
    const today = document.querySelector(
      ".el-calendar__button-group .el-button-group>button:nth-child(2)"
    );
    today.addEventListener("click", () => {
      // console.log(this.$refs.calendar.date)
      this.getDayCalendar(this.$refs.calendar.date);
    });

    // 点击下一个月
    const nextBtn = document.querySelector(
      ".el-calendar__button-group .el-button-group>button:nth-child(3)"
    );
    nextBtn.addEventListener("click", () => {
      // console.log(this.$refs.calendar.date)
      this.getDayCalendar(this.$refs.calendar.date);
    });
  },
  methods: {
    // dateChange() {
    //   console.log("日历切换", this.$refs.datePick.value)
    //   console.log("日历切换", this.$refs.calendar.value)
    //   // this.$refs.calendar.value = this.$refs.datePick.value
    //   console.log("日历切换", this.date)
    //   this.date = this.$refs.datePick.value
    // },
    // pickTime() {
    //   if (this.$refs.datePick.$el) {
    //     this.$refs.datePick.$el.click()
    //   }
    //   // console.log(this.$refs)
    // },
    // 获取预警通知单
    getAllWarningNotif() {
      getAllWarningNotifApi({}).then(res => {
        console.log(res);
        let options = [];
        options = res.data.map(item => {
          return {
            label: item.warningNoticeName,
            value: item.id,
            ...item
          };
        });
        this.warningNotifiOptions = options;

        if (options.length) {
          this.form.warningNotiId = options[0].value;
          this.getDayByYjtzd(options[0].value);
        }
      });
    },
    getDayByYjtzd(id, data) {
      getDayByYjtzdApi(id, data).then(res => {
        console.log(res);
        this.dayList = res.length ? res : [];
      });
    },
    // 当日日报统计
    dailyStatistics() {
      const dailyDate = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`;
      // console.log(dailyDate)
      dailyStatisticsApi({ "date": dailyDate }).then(res => {
        this.tableData1 = res;
        console.log("日报统计", res);
      });
    },
    selectChange(val) {
      if (val) {
        this.getDayByYjtzd(val, { state: "1" });
      }
    },
    goList() {
      this.$router.push({
        name: "WarningDailyList"
      });
    },
    getDayCalendar(date) {
      getDayCalendarApi({ month: this.formatDate(date) }).then(res => {
        this.dates = res;
      });
    },
    formatDate(val) {
      const date = new Date(val);
      const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
      return `${date.getFullYear()}-${date.getMonth() + 1}-${day}`;
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/pop-upNotification.less";

.EmergencyDailyReport {
  height: 95%;
  padding: 0 20px;
  margin: 0;

  :deep(.el-input__inner) {
    background-color: #0a4990;
    border: #3270ff 1px solid;
    color: #fff;
    font-family: "Microsoft YaHei UI";
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  .EmergencyDailyReport-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .EmergencyDailyReport-left {
      width: 40%;
      height: 100%;
      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;

      .EmergencyDailyReport-left-top {
        position: relative;
        width: 100%;
        // height: 40vh;
        height: 61%;
        border: #3270ff 1px solid;
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 5px 15px rgba(6, 73, 215, 0.6);
        box-sizing: border-box;

        :deep(.el-button) {
          display: none;
        }

        :deep(.el-calendar__title) {
          font-size: 18px;
          font-weight: bold;
          margin: auto;
        }

        :deep(.el-calendar-table thead th) {
          font-weight: 700;
        }

        :deep(.el-calendar-day) {
          position: relative;
          padding: 0;
          text-align: center;
          line-height: 58px;
          height: 57px;
          // background-color: #09285d;

          .img {
            position: absolute;
            bottom: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            vertical-align: middle;
          }
        }

        :deep(.el-calendar-day:hover) {
          background-color: transparent;
        }

        :deep(.el-calendar) {
          background-color: #09285d;
          // border-radius: 20px !important;
          height: 100%;

          .el-calendar-table__row:last-child {
            // display: none;
          }
        }

        :deep(.el-calendar__header) {
          background-color: rgba(53, 97, 253, 0.35);
          height: 35px;
        }

        :deep(.el-calendar-day) {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28px;
          font-weight: 700;
          font-family: Microsoft YaHei UI Bold;
          color: #3a7bfc;
          padding: 5px 0;
          height: 56px;
        }

        :deep(.el-calendar-table td.is-selected) {
          background-color: #bdb36e;
        }

        :deep(.el-calendar-table td) {
          border: 1px solid #445f8a;
        }

        :deep(.el-calendar__body) {
          padding: 0 !important;
        }

        :deep(.el-button) {
          border: 1px solid #445f8a;
          background-color: #09285d;
          color: #3a7bfc;
          border-radius: 0;
        }

        :deep(.el-calendar-table thead th) {
          border: 1px solid #445f8a;
          color: #fff;
          //height: 28px;
          background-color: rgba(38, 92, 255, 0.22);
        }

        :deep(.el-calendar__title) {
          color: #fff;
        }

        :deep(.el-calendar__header) {
          padding: 5px 10px;
          border: 1px solid #445f8a;
        }

        :deep(.el-calendar-table thead th:before) {
          content: "\5468";
        }
      }

      .EmergencyDailyReport-left-bottom {
        width: 100%;
        height: 37%;
        border: #3270ff 1px solid;
        border-radius: 4px;
        margin-top: 2%;
        // display: flex;
        // justify-content: space-around;
        // align-items: center;

        :deep(.el-table) {
          color: #fff;
          background-color: transparent;

          tr {
            background-color: transparent;
          }

          td.el-table__cell {
            border-color: #999;
          }
        }

        :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
          background-color: rgba(255, 255, 255, 0.1);
        }

        :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
          background: rgba(104, 168, 244, 0.3);
        }

        :deep(.el-table--border) {
          border-color: transparent;

          &::after,
          &::before {
            background-color: transparent;
          }
        }

        .EmergencyDailyReport-left-bottom-tb-rie {
          // width: 100%;
          //height: 15%;
          height: 41px;
          display: flex;
          align-items: center;
          // justify-content: space-around;
          color: #fff;
          background-color: #1749b4;
          padding-left: 10px;
          font-size: 18px;
          font-weight: bold;
          font-family: "Microsoft YaHei UI";

          .EmergencyDailyReport-left-bottom-tb-ries {
            margin-left: 5px;
            font-weight: 700;
            font-style: normal;
            font-size: 18px;
            color: #d5f0ff;
          }
        }

        .EmergencyDailyReport-left-bottom-tb-rr {
          height: 85%;
          padding: 0 8px;
        }

        .EmergencyDailyReport-left-bottom-tbs {
          width: 49%;
          height: 90%;
          border: #3270ff 1px solid;
          font-family: "Microsoft YaHei UI";
          font-weight: 400;
          font-style: normal;
          font-size: 16px;
          color: #ffffff;
          box-shadow: 0 5px 15px rgba(6, 73, 215, 0.6);
        }

        .EmergencyDailyReport-left-bottom-tb {
          // width: 49%;
          height: 90%;
          border: #3270ff 1px solid;
          font-family: "Microsoft YaHei UI";
          font-weight: 400;
          font-style: normal;
          font-size: 16px;
          color: #ffffff;
          box-shadow: 0 5px 15px rgba(6, 73, 215, 0.6);

          :deep(.el-input__inner) {
            height: 23px;
            line-height: 23px;
            border: #3270ff 1px solid;
            border-radius: 2px;
            color: #eeeeee;
            background-color: #22588f;
          }

          :deep(.el-input__suffix) {
            top: 8px;
          }
        }
      }
    }

    .EmergencyDailyReport-right {
      width: 58%;
      height: 100%;
      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;

      .EmergencyDailyReport-tb-bt-titel {
        padding: 10px;
        width: initial;
      }

      .EmergencyDailyReport-right-top {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        // height: 40%;
        border: #3270ff 1px solid;
        box-shadow: 0 5px 15px rgba(6, 73, 215, 0.6);
        // -moz-box-shadow: 0 5px 15px rgba(6, 73, 215, 0.5);

        .EmergencyDailyReport-tb-bt-top {
          width: 85%;
          height: 100%;
        }

        .EmergencyDailyReport-content {
          width: 100%;
          height: 80%;
          overflow-y: auto;
          // display: flex;
          // flex-wrap: wrap;
          padding-bottom: 20px;

          .EmergencyDailyReport-content-top {
            // display: inline-block;
            // width: 47%;
            height: 160px;
            border: #02a7f0 1px solid;
            background-color: rgba(2, 167, 240, 0.08);
            // display: flex;
            // flex-direction: column;
            // justify-content: center;
            // align-items: center;
            margin-top: 20px;
            // margin-left: 20px;
            padding: 15px;
            box-sizing: border-box;
            cursor: pointer;
            border-radius: 4px;

            .EmergencyDailyReport-content-tiel {
              padding: 10px 5px;
              font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI Regular", "Microsoft YaHei UI";
              font-size: 20px;
              font-weight: 700;
              color: #ffffff;
              text-decoration: underline;
            }

            .EmergencyDailyReport-content-tial {
              // width: 100%;
              display: flex;
              justify-content: space-between;
              padding: 10px 5px;
              font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI Regular", "Microsoft YaHei UI";
              font-weight: 600;
              font-style: normal;
              font-size: 16px;
              color: #ffffff;
              text-align: center;
              margin-top: 10px;
            }
          }
        }
      }

      .EmergencyDailyReport-right-bottom {
        width: 100%;
        height: 58%;
        border: #3270ff 1px solid;

        .EmergencyDailyReport-content-s {
          width: 100%;
          height: 80%;
          display: flex;
          justify-content: space-around;
          align-items: baseline;
          flex-wrap: wrap;
          padding: 5px 0;

          .EmergencyDailyReport-content-top-s {
            width: 45%;
            height: 50%;
            border: #3270ff 1px solid;
            background-color: #0a4990;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 5px;

            .EmergencyDailyReport-content-tiel-s {
              padding: 10px 10px;
              font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI Regular", "Microsoft YaHei UI";
              font-size: 14px;
              font-weight: 700;
              color: #ffffff;
              cursor: pointer;
            }

            .EmergencyDailyReport-content-tial-s {
              width: 80%;
              display: flex;
              justify-content: space-around;
              padding: 10px 10px;
              font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI Regular", "Microsoft YaHei UI";
              font-weight: 600;
              font-style: normal;
              font-size: 13px;
              color: #ffffff;
              text-align: center;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

.EmergencyDailyReport-tb-bt-top {
  :deep(.el-select) {
    .el-input--suffix .el-input__inner {
      box-shadow: 1px 1px 10px 2px #36afff inset;
      border: none;
      border-radius: 5px;
      color: #eeeeee;
      background-color: rgba(34, 88, 143, 0.5);
      font-size: 18px;
    }
  }
}

:deep(::-webkit-scrollbar) {
  width: 8px;
}

:deep(::-webkit-scrollbar-track) {
  background: transparent;
}

:deep(::-webkit-scrollbar-thumb) {
  box-shadow: none;
  background: #d7d7d7;
  border-radius: 4px;
}

:deep(.el-table .el-table__cell.gutter) {
  background: transparent;
}

:deep(.has-gutter) {
  th:last-child {
    display: none;
  }
}

/* :deep(.el-table--fit .el-table__cell.gutter) {
  background-color: #b1c8f9;
} */

:deep(.el-icon-date:before) {
  content: "\e78e";
}

.el-input__icon {
  line-height: 35px;
}

.EmergencyDailyReport {
  :deep(.el-input__inner) {
    background-color: transparent;
    border: transparent;
    color: #fff;
    //color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: bold;
  }
}

//隐藏日历自带年月
:deep(.el-calendar__title) {
  display: none;
}

.picker {
  position: absolute;
  top: 10px;
  left: 295px;
}

:deep(.leftTopBtn) {
  height: 0px !important;
}

.SelectOptions {
  width: 100%;

  :deep(.el-select) {
    width: 100%;
  }
}
</style>
